import React, { useState, useEffect } from "react";
import { MessageOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import '../../css/czs/czs.css'

export default function App() {
  const nav = useNavigate();

  const [type, setType] = useState([
    {
      id: 1,
      name: "清洁服务",
      img: "/清洁.png",
      key: "qingjie",
      backcolor: "#f4ecff",
    },
    {
      id: 2,
      name: "维修服务",
      img: "/维修.png",
      key: "weixiu",
      backcolor: "#fff7eb",
    },
    {
      id: 3,
      name: "粉刷服务",
      img: "/粉刷.png",
      key: "fenshua",
      backcolor: "#eff3ff",
    },
    {
      id: 4,
      name: "洗衣服务",
      img: "/洗衣机.png",
      key: "xiyi",
      backcolor: "#fffbed",
    },
    {
      id: 5,
      name: "家电维修",
      img: "/家电维修.png",
      key: "jiadian",
      backcolor: "#fff2f2",
    },
    {
      id: 6,
      name: "管道维修",
      img: "/管道.png",
      key: "guandao",
      backcolor: "#f1f9f1",
    },
    {
      id: 7,
      name: "搬家服务",
      img: "/搬家运输.png",
      key: "banjia",
      backcolor: "#ebfafc",
    },
    {
      id: 8,
      name: "美发服务",
      img: "/美发.png",
      key: "meifa",
      backcolor: "#f4ecff",
    },
    {
      id: 9,
      name: "空调维修",
      img: "/空调.png",
      key: "kongtiao",
      backcolor: "#f4ecff",
    },
    {
      id: 10,
      name: "打车服务",
      img: "/出租车.png",
      key: "dache",
      backcolor: "#eff3ff",
    },
    {
      id: 11,
      name: "3C维修",
      img: "/数码维修.png",
      key: "3C",
      backcolor: "#fffbed",
    },
    {
      id: 12,
      name: "美容服务",
      img: "/美容.png",
      key: "meirong",
      backcolor: "#fff2f2",
    },
    {
      id: 13,
      name: "代办服务",
      img: "/我的代办.png",
      key: "daiban",
      backcolor: "#f4ecff",
    },
  ]);
  useEffect(() => {
    const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = './listimgs/icon1.png'; // 替换为新图标路径
    document.getElementsByTagName('head')[0].appendChild(link);
    document.title = '服务类型';
  }, []);
  return (
    <div className="czs_typebox">
      <div className="czs_top">
        <div>
          <img onClick={() => {
            nav(-1);
          }} className="czs_back" src="./czs_imgs/返回.png" alt="" />
          <span className="czs_title"><b>服务类型</b></span>
        </div>
        <MessageOutline className="czs_message" onClick={() => {
          nav("/lmsg");
        }} />
      </div>

      <div className="czs_body">
        {type.map((item) => {
          return (
            <dl key={item.id} className="czs_item">
              <dt
                className="czs_item_backcolor"
                onClick={() => {
                  nav("/Czs_typelist", { state: { id: item.id, name: item.name } });
                }}
                style={{ backgroundColor: item.backcolor }}
              >
                <img
                  className="czs_type_img"
                  src={"./czs_imgs" + item.img}
                  alt=""
                />
              </dt>
              <dd
                style={{
                  fontSize: "14px",
                  fontWeight: "600",
                  marginTop: "10px",
                }}
              >
                {item.name}
              </dd>
            </dl>
          );
        })}
      </div>
    </div>
  );
}
